<script lang="ts">
import {defineComponent, ref, onActivated, computed, UnwrapRef, Ref} from "vue"
import {getTableListApi, optimizeTableApi, repairTableApi, exportDictionaryApi} from "@/apps/admin/api/system/db";
import {TableColumn} from "@/components/AppTable/TableType";
import {useErrorDialog, useSuccessDialog} from "@/hooks/DialogMsg";
import {ExportDictionary} from "@/apps/admin/view/system/db/export-doc";

export default defineComponent({
  setup() {
    const list: Ref<UnwrapRef<any[]>> = ref([])//数据表
    const keyword: Ref<UnwrapRef<string>> = ref('')//过滤词
    const loading: Ref<UnwrapRef<boolean>> = ref(false)//加载数据状态
    const impstate: Ref<UnwrapRef<boolean>> = ref(false)//导出中
    const columns: TableColumn[] = [
      {label: "序号", type: "index", minWidth: 80,fixed:'left'},
      {label: "表名称", prop: "Name", minWidth: 220,fixed:'left'},
      {label: "操作", type: "action", align: 'center', width: 120,fixed:'left'},
      {label: "数据库", prop: "database", minWidth: 150},
      {label: "备注", prop: "Comment", minWidth: 220},
      {label: "储存引擎", prop: "Engine", minWidth: 140},
      {label: "版本", prop: "Version", minWidth: 80},
      {label: "数据编码", prop: "Collation", minWidth: 180},
      {label: "数据量", prop: "Data_length", minWidth: 130},
      {label: "索引大小", prop: "Index_length", minWidth: 115},
      {label: "创建时间", prop: "Create_time", minWidth: 180},
      {label: "上次修改", prop: "Update_time", minWidth: 180},
    ];


    /**
     * 数据表
     */
    const tables = computed(() => {
      let tablist = []
      let key = keyword.value
      for (let tab of list.value) {
        if (key.length === 0 || tab.Name.indexOf(key) > -1 || tab.Comment.indexOf(key) > -1) {
          tablist.push(tab)
        }
      }
      return tablist
    })

    /**
     * 获取数据库列表
     */
    function getTableListData() {
      loading.value = true
      getTableListApi().then(result => {
        if (result.code === 200) {
          let res = [];
          for (let database of result.data) {
            for (let table of database.list) {
              res.push({...table, database: database.database, connection: database.connection})
            }
          }
          list.value = res
        }
        loading.value = false
      })
    }

    /**
     * 修复表
     * @param name
     * @param connection
     */
    function repairTableHandle(name: string, connection: string) {
      repairTableApi(connection, name).then(result => {
        if (result.code === 200) {
          useSuccessDialog(result.msg)
          getTableListData()
        }
      })
    }


    /**
     * 优化表
     */
    function optimizeTableHandle(name: string, connection: string) {
      optimizeTableApi(connection, name).then(result => {
        if (result.code === 200) {
          useSuccessDialog(result.msg)
          getTableListData()
        }
      })
    }

    /**
     * 导出数据字典
     */
    function ExportDatabaseDoc() {
      impstate.value = true
      exportDictionaryApi().then(result => {
        if (result.code === 200) {
          if (!ExportDictionary(result.data)) {
            useErrorDialog('数据字典导出失败')
          }
        }
        impstate.value = false
      })
    }

    onActivated(() => {
      getTableListData()
    })

    return {
      tables,
      columns,
      loading,
      impstate,
      keyword,
      repairTableHandle,
      optimizeTableHandle,
      getTableListData,
      ExportDatabaseDoc
    }
  }
})
</script>

<template>
  <data-card title="数据库数据字典表">
    <template #right>
      <el-space>
        <el-input size="small" placeholder="搜索表名称" v-model.trim="keyword"></el-input>
        <el-button size="small" :loading="impstate" type="success" @click="ExportDatabaseDoc">
          {{ impstate ? '导出中' : '导出' }}
        </el-button>
        <el-button size="small" :loading="loading" type="primary" @click="getTableListData">
          刷新
        </el-button>
      </el-space>
    </template>

    <template #default>
      <app-table class="app-margin-top-interval" :loading height="calc(var(--ach) - 86px)" :columns="columns" :data="tables">
        <template #action="{ row }">
          <el-space>
            <operate-link @tap="repairTableHandle(row.Name,row.connection)">
              修复表
            </operate-link>
            <operate-link @tap="optimizeTableHandle(row.Name,row.connection)">
              优化表
            </operate-link>
          </el-space>
        </template>
      </app-table>
    </template>
  </data-card>
</template>